<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="1400px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <div v-for="(item, index) in peopleList" :key="index">
      <el-row>
        <el-col :span="1">
          <div class="indexClass">{{ index + 1 }}</div></el-col
        ><el-col :span="19">
          <el-form
            :ref="'form' + index"
            :model="item"
            :rules="rules"
            size="small"
            label-width="135px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="案件名称" prop="caseName">
                  <el-input
                    :disabled="item.isSave"
                    v-model.trim="item.caseName"
                    placeholder="请输入案件名称"
                    :maxlength="50"
                    clearable
                  ></el-input> </el-form-item></el-col
              ><el-col :span="8">
                <el-form-item label="判决书号" prop="rulingBookNumber">
                  <el-input
                    :disabled="item.isSave"
                    v-model.trim="item.rulingBookNumber"
                    placeholder="请输入判决书号"
                    :maxlength="50"
                    clearable
                  ></el-input> </el-form-item></el-col
              ><el-col :span="8">
                <el-form-item label="执行案号" prop="executeNumber">
                  <el-input
                    :disabled="item.isSave"
                    v-model.trim="item.executeNumber"
                    placeholder="请输入执行案号"
                    :maxlength="50"
                    clearable
                  >
                  </el-input> </el-form-item></el-col
            ></el-row>
            <div v-show="item.showFlag">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="案件所属区域" prop="bm">
                    <treeselect
                      :disabled="item.isSave"
                      class="treeselect"
                      v-model.trim="item.bm"
                      :options="item.deptOptions"
                      :show-count="true"
                      placeholder="请选择案件所属区域"
                      :normalizer="normalizer"
                    /> </el-form-item
                ></el-col>
                <el-col :span="8">
                  <el-form-item label="涉案人数" prop="involvedPeople">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.involvedPeople"
                      placeholder="请输入涉案人数"
                      maxlength="11"
                      clearable
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="涉案金额(元)" prop="involvedMoney">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.involvedMoney"
                      placeholder="请输入涉案金额"
                      maxlength="11"
                      clearable
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                    </el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="追回损失(元)" prop="recoveryLoss">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.recoveryLoss"
                      placeholder="请输入追回损失"
                      maxlength="11"
                      clearable
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                    </el-input> </el-form-item
                ></el-col>
                <el-col :span="8">
                  <el-form-item
                    label="判决损失金额(元)"
                    prop="judgmentLossAmount"
                  >
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.judgmentLossAmount"
                      placeholder="请输入判决损失金额"
                      maxlength="11"
                      clearable
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                    </el-input>
                  </el-form-item> </el-col
                ><el-col :span="8">
                  <el-form-item
                    label="认定发放金额(元)"
                    prop="confirmedPayment"
                  >
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.confirmedPayment"
                      placeholder="请输入认定发放金额(元)"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      :maxlength="20"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="案件简介" prop="introduction">
                <el-input
                  v-model.trim="item.introduction"
                  type="textarea"
                  :disabled="item.isSave"
                  placeholder="请输入案件简介"
                  :maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 7 }"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="operation">
            <!-- <el-button
              class="searchButton2"
              :icon="item.showFlag == true ? 'el-icon-top' : 'el-icon-bottom'"
              @click="showAll(item)"
              >详情</el-button
            > -->
            <img
              src="@/assets/images/topArrower.png"
              alt=""
              @click="showAll(item)"
              v-if="item.showFlag == true"
              class="arrow1"
            />
            <img
              src="@/assets/images/topArrower.png"
              alt=""
              @click="showAll(item)"
              v-else
              class="arrow2 is-active"
            />
          </div>
          <div class="border"></div
        ></el-col>
        <el-col :span="4">
          <div class="saveDeleteGroup">
            <el-button @click="save(item, index)" class="searchButton1">{{
              item.buttonContent
            }}</el-button>
            <el-button class="resetButton1" @click="deletePerson(item, index)"
              >删除</el-button
            >
          </div>
        </el-col></el-row
      >
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button
          class="searchButton"
          @click="submitForm"
          :loading="buttonLoading"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { MODALTYPE, MODALIMG, CASEDEFAULTSTATE } from "@/utils/variable";
import { onlyNumber } from "@/utils/commonMethods";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { validNumber, batchInsert } from "@/api/caseManage/case";
export default {
  name: "importModal",
  inheritAttrs: false,
  components: { Treeselect },
  props: {
    modalType: {
      type: String,
      require: true,
    },
    id: {
      type: Number,
    },
    personList: {
      type: Array,
    },
  },
  data() {
    //案件重复校验
    var checkRulingBookNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error("判决书号不能为空"));
      } else {
        let tmpCaseName = "";
        this.personList.forEach((el) => {
          if (el.rulingBookNumber == value) {
            tmpCaseName = el.caseName;
          }
        });
        let params = {
          caseName: tmpCaseName,
          rulingBookNumber: value,
        };
        validNumber(params).then((response) => {
          if (response.data === 1) {
            callback(new Error("该案件已重复！"));
          } else {
            callback();
          }
        });
      }
    };
    return {
      peopleList: [],
      isDisabled: false,
      // 弹出层标题
      title: "批量导入",
      temCaseName: "",
      temRulingBookNumber: "",
      // 部门树选项
      buttonLoading: false,
      // 是否显示弹出层
      open: false,
      formData: {
        caseName: "",
        rulingBookNumber: "",
        executeNumber: "",
        bm: "",
        involvedPeople: "",
        needMoney: "",
        introduction: "",
        judgmentLossAmount: "",
        confirmedPayment: "",
        recoveryLoss: "",
        involvedMoney: "",
      },
      rules: {
        recoveryLoss: [
          {
            required: true,
            message: "请输入追回损失",
            trigger: "blur",
          },
        ],
        involvedMoney: [
          {
            required: true,
            message: "请输入涉案金额",
            trigger: "blur",
          },
        ],
        judgmentLossAmount: [
          {
            required: true,
            message: "请输入判决损失金额",
            trigger: "blur",
          },
        ],
        caseName: [
          {
            required: true,
            message: "请输入案件名称",
            trigger: "blur",
          },
        ],
        rulingBookNumber: [
          {
            required: true,
            validator: checkRulingBookNumber,
            trigger: "blur",
          },
        ],
        executeNumber: [
          {
            required: true,
            message: "请输入执行案号",
            trigger: "blur",
          },
        ],
        bm: [
          {
            required: true,
            message: "请选择案件所属选择",
            trigger: "change",
          },
        ],
        involvedPeople: [
          {
            required: true,
            message: "请输入涉案人数",
            trigger: "blur",
          },
        ],
        // needMoney: [
        //   {
        //     required: true,
        //     message: "请输入应发放金额(元)",
        //     trigger: "blur",
        //   },
        // ],
        confirmedPayment: [
          {
            required: true,
            message: "请输入认定发放金额",
            trigger: "blur",
          },
        ],
      },
    };
  },
  inject: ["getList"],
  computed: {
    resetButtonContent() {
      if (this.modalType == MODALTYPE["详情"]) {
        return "关闭";
      } else {
        return "取消";
      }
    },
  },
  watch: {
    //监听personList，如果有值，打开模态框
    personList: {
      handler(value) {
        console.log(value);
        if (value.length !== 0) {
          //为每条数据增加showFlag，控制是否显示隐藏，默认显示
          this.peopleList = value;
          this.open = true;
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onlyNumber,
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id, //自定义id
        label: node.label, //自定义label
        //处理children，当children为[]或null时，子节点会展示No sub-options，一般子节点不需要展示这个，所以将children置为0
        children: node.children && node.children.length > 0 ? node.children : 0,
      };
    },
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", "");
      this.open = false;
    },

    //每个表单保存按钮，是否通过校验，没通过校验无法保存，通过校验保存
    save(item, index) {
      let form = "form" + index;
      this.$refs[form][0].validate((valid) => {
        if (valid) {
          if (item.buttonContent == "保存") {
            item.buttonContent = "编辑";
            item.isSave = true;
            item.showFlag = false;
          } else {
            item.buttonContent = "保存";
            item.isSave = false;
            item.showFlag = true;
          }
        } else {
          return;
        }
      });
    },
    // 表单重置
    reset() {
      this.formData = {
        caseName: "",
        rulingBookNumber: "",
        executeNumber: "",
        caseState: "",
        bm: undefined,
        involvedPeople: "",
        payedPeople: "",
        payedMoney: "",
        needMoney: "",
        introduction: "",
        judgmentLossAmount: "",
        confirmedPayment: "",
        recoveryLoss: "",
        involvedMoney: "",
      };
      this.resetForm("form");
    },
    //通过每一个表单在循环中的index进行删除
    deletePerson(item, index) {
      let number = index;
      this.personList.forEach((element, index) => {
        if (index == number) {
          this.personList.splice(number, 1);
        }
      });
    },
    //展开，隐藏
    showAll(item) {
      console.log(item.showFlag);
      item.showFlag = !item.showFlag;
      // item.isActive = !item.isActive;
    },

    /** 提交按钮 */
    submitForm() {
      let submitFlag = false;
      this.personList.forEach((el) => {
        if (el.isSave == false) {
          submitFlag = true;
        }
      });
      if (submitFlag == true) {
        this.$message.warning("当前表单存在未保存案件信息，请确认后再提交！");
      } else {
        //先利用ES6语法Set将数组去重，之后再原数组比较长度，若长度小于原数组，则说明数组有重复值
        let newListLength = new Set(
          this.personList.map((item) => item.caseName && item.rulingBookNumber)
        ).size;
        let listLength = this.personList.length;
        if (listLength > newListLength) {
          this.$message.warning("表单中存在重复案件，请确认并重新填写！");
        } else {
          this.buttonLoading = true;
          let params = { caseImportDTOList: this.personList };
          batchInsert(params).then((response) => {
            this.buttonLoading = false;
            this.$emit("update:personList", []);
            this.getList();
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/dialog.scss"; //模态框样式

::v-deep.treeselect {
  font-size: 12px !important;
  font-family: $font-family !important;
  font-weight: $form-label-font-weight !important;
}

.iconClass {
  color: #4f7ff8;
  font-size: 30px;
  position: absolute;
  top: 8px;
  margin-left: 10px;
}
::v-deep.el-form-item .el-form-item__error {
  width: 85px !important;
}
.personDialogClass {
  ::v-deep .el-dialog__body {
    padding: 10px 30px 10px 30px !important;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 650px !important;
    max-height: 700px;
  }
  ::v-deep.el-dialog:not(.is-fullscreen) {
    margin-top: 3vh !important;
  }
}
.noButton {
  border: 0.1rem solid #598af9;
  height: 3.8rem;
  width: 81px;
  border-radius: 0.2rem;
  margin-right: 1rem;
  font-size: 1.6rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  letter-spacing: 0;
  color: #598af9;
  line-height: 1rem;
  letter-spacing: 0px;
  background: white;
}
.yesButton {
  width: 81px;
  border: 0px;
  height: 39px;
  background: $form-button-background-color;
  border-radius: 3px;
  font-size: $form-button-font-size;
  margin-right: 10px;
  font-family: $font-family;
  font-weight: $form-button-font-weight;
  letter-spacing: 0;
  color: #fefbfb;
  line-height: 10px;
  letter-spacing: 2px;
}
.addButton {
  width: 81px;
  border: 0px;
  height: 39px;
  background: $form-button-background-color;
  border-radius: 3px;
  font-size: $form-button-font-size;
  margin-right: 10px;
  font-family: $font-family;
  font-weight: $form-button-font-weight;
  letter-spacing: 0;
  color: #fefbfb;
  line-height: 10px;
  letter-spacing: 2px;
}
.trueButton {
  width: 120px;
  border: 0px;
  height: 39px;
  background: $form-button-background-color;
  border-radius: 3px;
  font-size: $form-button-font-size;
  margin-right: 10px;
  font-family: $font-family;
  font-weight: $form-button-font-weight;
  letter-spacing: 0;
  color: #fefbfb;
  line-height: 10px;
  letter-spacing: 2px;
}
.delButton {
  border: 0.1rem solid #598af9;
  height: 38px;
  width: 120px;
  border-radius: 3px;
  margin-right: 10px;
  font-size: $form-button-font-size;
  font-family: $font-family;
  font-weight: $form-button-font-weight;
  letter-spacing: 0;
  color: #598af9;
  line-height: 10px;
  letter-spacing: 2px;
  background: white;
}
.indexClass {
  margin-top: 17px;
  margin-left: 30px;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border: 1px solid #2a92ed;
  border-radius: 4px;
  color: #2a92ed;
  font-size: 14px;
  font-family: DengXian;
  font-weight: 400;
}
.personAdd {
  margin-top: 15px;
  .operationButton {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-between;
    vertical-align: middle;
  }
}
::v-deep.el-form-item {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.operation {
  padding-top: 5px;
  width: 100%;
  display: flex;
}
.caseSelect {
  width: 300px !important;
}
.selectClass {
  width: 100% !important;
}
.addressSelect {
  margin-right: 20px !important;
}
.saveDeleteGroup {
  display: flex;
  margin-left: 50px;
}
// .personDialogClass {
//   ::v-deep.el-dialog__body {
//     padding-right: 25px !important;
//   }
// }
::v-deep.el-form-item .el-form-item__error {
  width: 100% !important;
}
.arrow1 {
  width: 35px;
  height: 30px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  cursor: pointer;
}
.arrow2 {
  width: 35px;
  height: 30px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  cursor: pointer;
}
.is-active {
  transform: rotate(180deg);
}
.border {
  width: 1145px;
  height: 1px;
  margin-top: 3px;
  background-color: #d1d1d1;
}
.searchButton1 {
  margin-top: 15px;
  width: 60px;
  height: 30px;
  background: #598af9;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 10px;
  font-family: Microsoft YaHei;
  letter-spacing: 2px;
  color: #fefbfb;
  border: 0px;
}
.searchButton2 {
  margin-left: 500px;
  width: 60px;
  height: 30px;
  font-size: 14px;
  background: #598af9;
  border-radius: 4px;
  margin-right: 10px;
  font-weight: 700;
  font-family: Microsoft YaHei;
  letter-spacing: 2px;
  color: #fefbfb;
  border: 0px;
}
.zjhInput {
  width: 240px;
}
.resetButton1 {
  margin-top: 15px;
  border: 1px solid #598af9;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  width: 60px;
  height: 30px;
  background: #fff;
  font-family: Microsoft YaHei;
  color: #598af9;
  letter-spacing: 2px;
}
.saveDeleteGroup {
  display: flex;
  margin-left: 50px;
}
</style>
